<html>
    <head>
        <title>progress</title>
    </head>
    <body>
        <script>
            // progress 

                    //  https://uniapp.dcloud.net.cn/component/progress.html
                    /*
                        一、进度条
                                    
                    */

                    /*
                        二、属性说明

                                        属性名	            类型	            默认值	        说明	                                                                    平台差异说明

                                    1、percent	            Number	            无	        百分比0~100	

                                    2、show-info	        Boolean	            false	    在进度条右侧显示百分比	

                                    3、border-radius	    Number/String	    0	        圆角大小	                                                        app-nvue、微信基础库2.3.1+、QQ小程序、快手小程序、京东小程序

                                    4、font-size	        Number/String	    16	        右侧百分比字体大小	                                                 app-nvue、微信基础库2.3.1+、QQ小程序、京东小程序

                                    5、stroke-width	        Number/String	    6	        进度条线的宽度，接受 px 和 rpx 值	

                                    6、activeColor	        Color	            #09BB07  	已选择的进度条的颜色	

                                    7、backgroundColor	    Color	            #EBEBEB	    未选择的进度条的颜色	

                                    8、active	            Boolean	            false	    进度条从左往右的动画	

                                    9、active-mode	        String	            backwards	backwards: 动画从头播；
                                                                                            forwards：动画从上次结束点接着播	                                    App、H5、微信小程序、QQ小程序、快手小程序、京东小程序

                                    10、duration	        Number	            30	        进度增加1%所需毫秒数	                                    App-nvue2.6.1+、微信基础库2.8.2+、H5 3.1.11+、App-Vue 3.1.11+、快手小程序、京东小程序
                                    
                                    11、@activeend	        EventHandle		                动画完成事件	                                                                    微信小程序、京东小程序  
                    */

                    /*
                        三、示例

                                <template>
                                    <view>
                                        <view class="uni-padding-wrap uni-common-mt">
                                            <view class="progress-box">
                                                <progress :percent="pgList[0]" show-info stroke-width="3" />
                                            </view>
                                            <view class="progress-box">
                                                <progress :percent="pgList[1]" stroke-width="3" />
                                                <uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
                                            </view>
                                            <view class="progress-box">
                                                <progress :percent="pgList[2]" stroke-width="3" />
                                            </view>
                                            <view class="progress-box">
                                                <progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
                                            </view>
                                            <view class="progress-control">
                                                <button type="primary" @click="setProgress">设置进度</button>
                                                <button type="warn" @click="clearProgress">清除进度</button>
                                            </view>
                                        </view>
                                    </view>
                                </template>

                                <script>
                                    export default {
                                            data() {
                                                return {
                                                    pgList: [0, 0, 0, 0]
                                                }
                                            },
                                            methods: {
                                                setProgress() {
                                                    this.pgList = [20, 40, 60, 80]
                                                },
                                                clearProgress() {
                                                    this.pgList = [0, 0, 0, 0]
                                                }
                                            }
                                        }
                                </、script>

                                <style>
                                    .progress-box {
                                        display: flex;
                                        height: 50rpx;
                                        margin-bottom: 60rpx;
                                    }

                                    .uni-icon {
                                        line-height: 1.5;
                                    }

                                    .progress-cancel {
                                        margin-left: 40rpx;
                                    }

                                    .progress-control button {
                                        margin-top: 20rpx;
                                    }
                                </style>
                    */
        </script>
    </body>
</html>